<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
        @search="
          $refs.masterList.localSearch(parameter.menuName, '', 'menuName')
        "
        @reset="
          () => {
            (parameter = {}), $refs.masterList.refresh(true);
          }
        "
      >
        <template slot="toolBtn" slot-scope="scope">
          <a-button
            class="cu-btn-primary"
            icon="plus"
            @click="
              (e) => {
                handleAdd('1', $refs.masterList.data);
              }
            "
            v-action:menu_add
          >
            {{ $ct("add", "新增") }}
          </a-button>
          <a-button icon="upload" type="link" @click="importReportFile"
            >{{ $ct("Import", "导入") }}
          </a-button>
          <!-- <a-button
            class="cu-btn-danger"
            icon="delete"
            @click="handleSub($refs.masterList.selectedRowKeys)"
            >{{$ct("delete","删除")}}</a-button
          > -->
          <!-- <a-button icon="bars" @click="createButton()" type="link"
            >生成功能菜单</a-button
          > -->
        </template>
        <template slot="toolForm">
          <a-form-item label="菜单名称">
            <a-input v-model="parameter.menuName" placeholder="菜单名称" />
          </a-form-item>
          <!-- <a-form-item label="菜单地址">
					  <a-input v-model="parameter.url" placeholder="菜单地址"/>
					</a-form-item>
					<a-form-item label="菜单状态">
					  <a-input v-model="parameter.status" placeholder="菜单状态"/>
					</a-form-item> -->
        </template>
      </tool-bar>
      <TreeGrid
        ref="masterList"
        :columns="masterColumns"
        :url="url"
        :loadAll="true"
        rowKey="uuid"
        :parameter="parameter"
        @rowClick="masterRowClick"
        :showRowSelect="false"
        :pagination="false"
      >
        <span slot="renderMenuStatus" slot-scope="{ text }">
          <a-tag :color="text === 'MenuStatus.01' ? 'green' : 'red'">
            {{
              text === "MenuStatus.01"
                ? $ct("enable", "启用")
                : $ct("disable", "禁用")
            }}
          </a-tag>
        </span>
        <span slot="renderMenuType" slot-scope="{ text }">
          {{ text | resourceTypeFilter }}
        </span>
        <span slot="componentFilter" slot-scope="{ text }">
          {{ text | componentFilter }}
        </span>
        <span slot="renderIconCls" slot-scope="{ text }">
          <icon-font :type="'icon-' + text"></icon-font>
        </span>
        <span slot="renderAction" slot-scope="{ record }">
          <template>
            <a
              v-action:menu_edit
              @click="handleEdit(record, $refs.masterList.data)"
              v-if="record.isSystemMenu == 0"
            >
              {{ $ct("edit", "编辑") }}
            </a>
            <!-- <span class="action-margin"></span> -->
            <span class="action-margin"></span>
            <a
              v-action:menu_delete
              @click="handleSub(record)"
              :class="record.id == 60 ? 'a-disabled' : 'action-delete'"
              v-if="record.isSystemMenu == 0"
            >
              {{ $ct("delete", "删除") }}
            </a>
            <a-dropdown>
              <a class="ant-dropdown-link">
                更多
                <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item
                  v-if="
                    !~['TabsView', 'PageView', 'RouteView'].indexOf(
                      record.menuAssembly
                    )
                  "
                >
                  <!-- <a @click="openAuthMaintain(record.uuid)">按钮权限</a> -->
                  <a
                    @click="
                      buttonAuth(
                        record.uuid,
                        record.menuName,
                        record.menuAssembly
                      )
                    "
                    >按钮权限</a
                  >
                </a-menu-item>
                <!-- <a-menu-item
                  v-if="
                    !~['TabsView', 'PageView', 'RouteView'].indexOf(
                      record.menuAssembly
                    )
                  "
                >
                  <a
                    @click="
                      dataAuth(
                        record.uuid,
                        record.menuName,
                        record.menuAssembly
                      )
                    "
                    >数据权限</a
                  >
                </a-menu-item> -->
                <!-- <a-menu-item
                  v-if="
                    !~['TabsView', 'PageView', 'RouteView'].indexOf(
                      record.menuAssembly
                    )
                  "
                >
                  <a
                    @click="
                      listAuth(
                        record.uuid,
                        record.menuName,
                        record.menuAssembly
                      )
                    "
                    >列表权限</a
                  >
                </a-menu-item> -->
                <!-- <a-menu-item
                  v-if="
                    !~['TabsView', 'PageView', 'RouteView'].indexOf(
                      record.menuAssembly
                    )
                  "
                >
                  <a
                    @click="
                      formAuth(
                        record.uuid,
                        record.menuName,
                        record.menuAssembly
                      )
                    "
                    >表单权限</a
                  >
                </a-menu-item> -->
                <a-menu-item>
                  <a @click="exportFile(record.uuid)">导出数据</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </span>
      </TreeGrid>
      <!--	新增编辑	 -->
      <edit-form
        :type="key"
        ref="masterModal"
        :visible="masterVisible"
        :loading="masterConfirmLoading"
        :model="masterMdl"
        @cancel="handleCancel()"
        @ok="handleOk()"
      />
      <buttonForm
        ref="buttonModal"
        :visible="buttonVisible"
        :loading="buttonConfirmLoading"
        :model="buttonMdl"
        @cancel="handleButtonCancel()"
        @ok="handleButtonOk()"
      />
      <!-- <auth-maintain
				ref="authMaintain"
				:visible="authMaintainVisible"
				@confirm="authMaintainConfirm"
				@cancel="authMaintainCancel"
			/> -->
      <web-upload
        ref="webUploadModal"
        :visible="visibleFile"
        :showTipText="true"
        :width="450"
        url="/system/menu/importSysMenuJson"
        @cancel="() => (visibleFile = false)"
        @ok="importReportJson"
      />
      <data-auth
        ref="dataAuth"
        :visible="dataAuthVisible"
        @cancel="dataAuthVisible = false"
      />
      <button-auth
        ref="buttonAuth"
        :visible="buttonAuthVisible"
        @cancel="buttonAuthVisible = false"
      />
      <list-auth
        ref="listAuth"
        :visible="listAuthVisible"
        @cancel="listAuthVisible = false"
      />
      <form-auth
        ref="formAuth"
        :visible="formAuthVisible"
        @cancel="formAuthVisible = false"
      />
    </div>
  </div>
</template>

<script>
import { TreeGrid, ExportData } from "@/components";
import { treeGridMixin } from "@/mixins/treeGridMixin";
import editForm from "./treeEdit";
import buttonForm from "./button.vue";
// import authMaintain from "./authMaintain.vue";
import buttonAuth from "./buttonAuth.vue";
import dataAuth from "./dataAuth.vue";
import listAuth from "./listAuth.vue";
import formAuth from "./formAuth.vue";

import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
import { baseUrl } from "@/services/baseUrl.js";
import { getToken } from "@/utils/TopVUI";

const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});

export default {
  name: "Table",
  components: {
    TreeGrid,
    editForm,
    buttonForm,
    IconFont,
    ExportData,
    dataAuth,
    listAuth,
    formAuth,
    buttonAuth,
  },
  mixins: [treeGridMixin],
  data() {
    return {
      masterColumns: [
        {
          title: "菜单名称",
          align: "left",
          dataIndex: "menuName",
          width: 250,
        },
        {
          title: "资源类型",
          dataIndex: "menuType",
          scopedSlots: { customRender: "renderMenuType" },
          width: 80,
        },
        {
          title: "菜单地址",
          dataIndex: "menuUrl",
          ellipsis: true,
          width: 250,
        },
        {
          title: "前端组件",
          dataIndex: "menuAssembly",
          langCode: "frontEndComponents",
          ellipsis: true,
          scopedSlots: { customRender: "componentFilter" },
          width: 250,
        },
        // {
        //   title: "编号",
        //   dataIndex: "id",
        // },
        // {
        //   title: "父级编号",
        //   dataIndex: "pid",
        // },
        {
          title: "图标",
          dataIndex: "iconCls",
          langCode: "icon",
          width: 50,
          align: "center",
          scopedSlots: { customRender: "renderIconCls" },
        },
        {
          title: "排序",
          dataIndex: "menuSort",
          width: 50,
          align: "center",
        },
        {
          title: "状态",
          dataIndex: "menuStatus",
          langCode: "state",
          align: "center",
          scopedSlots: { customRender: "renderMenuStatus" },
          width: 80,
        },
        {
          title: "操作",
          width: 150,
          align: "center",
          dataIndex: "action",
          fixed: "right",
          scopedSlots: { customRender: "renderAction" },
        },
      ],
      masterVisible: false,
      masterConfirmLoading: false,
      masterMdl: null,
      // 查询参数
      masterQueryParam: {},
      url: {
        fathersUrl: "/system/menu/getTreeSysMenuData",
        // fathersUrl: "/system/menu/getListByLevelId",
        expandUrl: "/system/menu/getListByPid",
        masterUpdate: "/system/menu/update",
        masterDelete: "/system/menu/delete",
        masterSaveRoot: "/system/menu/save",
        masterSave: "/system/menu/save",
        menuMenuSave: "/system/menu/functionMenuSave",
      },
      parameter: {
        father: {
          levelId: 1,
        },
        children: {},
      },
      buttonVisible: false,
      buttonConfirmLoading: false,
      buttonMdl: null,
      key: "",
      // authMaintainVisible: false,
      visibleFile: false,
      token: false,
      // authMaintainModel: null,
      dataAuthVisible: false,
      buttonAuthVisible: false,
      listAuthVisible: false,
      formAuthVisible: false,
    };
  },
  filters: {
    resourceTypeFilter(val) {
      const resourceTypeMap = {
        menu: "菜单",
        urlNewWindows: "链接-新窗口",
        button: "按钮",
        urlInsidePage: "链接-内页",
        outerChain: "链接-外链",
        APP: "APP菜单",
      };
      return resourceTypeMap[val];
    },
    componentFilter(val) {
      const componentMap = {
        TabsView: "外层布局",
        PageView: "页面布局",
        RouteView: "空布局",
      };
      return componentMap[val] || val;
    },
  },
  mounted() {
    this.token = getToken();
  },
  methods: {
    // 生成功能菜单
    createButton() {
      // if (!this.$refs.masterList.rows) {
      //   this.$message.info("请先选择所要操作的数据");
      //   return true;
      // } else {
      this.buttonVisible = true;
      this.buttonMdl = this.$refs.masterList.rows;
      this.$refs.buttonModal.show(this.buttonMdl);
      // }
    },
    /* 取消 */
    handleButtonCancel(type) {
      let form = {};
      this.buttonVisible = false;
      form = this.$refs.buttonModal.form;
      form.resetFields(); // 清理表单数据（可不做）
    },
    /* 提交 */
    handleButtonOk() {
      const form = this.$refs.buttonModal.form;
      this.buttonConfirmLoading = true;
      form.validateFields((errors, values) => {
        if (!errors) {
          this.$post(this.url.menuMenuSave, values).then((res) => {
            this.buttonConfirmLoading = false;
            if (res.statusCode === 200) {
              this.buttonVisible = false;
              this.$message.success(res.message);
              this.treeData = [];
              this.$refs.masterList.refresh();
            } else {
              this.$message.info(res.message);
            }
          });
        } else {
          this.buttonConfirmLoading = false;
        }
      });
    },
    // openAuthMaintain(uuid){
    // 	this.$refs.authMaintain.menuUuid = uuid;
    // 	this.authMaintainVisible = true;
    // },
    // authMaintainConfirm(){
    // 	this.authMaintainVisible = false;
    // },
    // authMaintainCancel(){
    // 	this.authMaintainVisible = false;
    // },
    importReportFile() {
      this.$refs.webUploadModal.add();
      this.visibleFile = true;
    },
    importReportJson() {
      this.visibleFile = false;
      this.$refs.masterList.refresh();
    },
    exportFile(uuid) {
      window.location.href =
        baseUrl +
        "/system/menu/exportSysMenuJson?token=" +
        this.token +
        "&uuid=" +
        uuid;
    },
    dataAuth(uuid, name, menuAssembly) {
      this.dataAuthVisible = true;
      this.$refs.dataAuth.loadData(uuid, name, menuAssembly);
    },
    buttonAuth(uuid, name, menuAssembly) {
      this.buttonAuthVisible = true;
      this.$refs.buttonAuth.loadData(uuid, name, menuAssembly);
    },
    listAuth(uuid, name, menuAssembly) {
      this.listAuthVisible = true;
      this.$refs.listAuth.loadData(uuid, name, menuAssembly);
    },
    formAuth(uuid, name, menuAssembly) {
      this.formAuthVisible = true;
      this.$refs.formAuth.loadData(uuid, name, menuAssembly);
    },
  },
};
</script>

<style scoped lang="less">
.table {
  background-color: @base-bg-color;
  padding: 24px;
}
</style>
